<template>
<!-- 权限 -->
  <div class="interview-skills">
    <div class="hm-mm-top" style='display:flex;justify-content: space-between;'>
      <!-- 左边输入搜索 -->
      <div class="hm-mm-top-left">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="用户名">
            <el-input v-model.trim="formSearch_title" placeholder="根据用户名搜索" style="width:280px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click='clearMsg'>清空</el-button>
            <el-button type="primary" @click="SearchOnSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 右边新增用户 -->
      <div class="hm-mm-top-right">
       <el-button type="success" @click="Visible"><i class="el-icon-edit" style="margin-right: 10px;"></i>新增权限组</el-button>
      </div>
    </div>
    <el-alert type="info" style="width: 99%;margin: 0 auto;" :closable='false'>
      <i class="el-icon-info"/>&nbsp;&nbsp;共&nbsp;{{DataNum}}&nbsp;条记录
    </el-alert>
    <!-- 列表 -->
    <div class="hm-mm-list" style="width: 100%">
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="title" label="用户名" width="" align='center'></el-table-column>
        <el-table-column prop="createTime" label="日期" width="300" align='center' sortable></el-table-column>
        <el-table-column label="操作" width="" align='center'>
          <template #default="{row}">
           <el-button type="primary" icon="el-icon-edit" circle @click='recompose(row)'></el-button>
           <el-button type="danger" icon="el-icon-delete" circle @click='remove(row)'></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next, sizes, jumper" :total="totalPages" :page-sizes="[5, 10, 20, 50]" style="float: right;margin-right: 10px;margin-top: 20px;"
      @current-change="handleCurrentChange" @size-change="handleSizeChange"></el-pagination>
    </div>
    <!-- 用户对话框 -->
    <el-dialog :title="title" :visible.sync="articledialogVisible" width="800px" @close='dialogclose'>
      <el-form :model="formData" status-icon :rules="rules" ref="formData" label-width="150px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="title">
          <el-input type="text" v-model="formData.title" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="权限分配">
          <el-tree :data="permission_data" show-checkbox node-key="id"
          :default-expanded-keys="[0]" :default-checked-keys="formData.permissions"
          style="margin-top:8px" @check-change="handleCheckChange"></el-tree>
        </el-form-item>
        <el-form-item class="dialog-footer">
          <el-button @click="articledialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, update, remove, simple, detail} from '@/api/base/permissions'
import { list as menu_list } from '@/api/base/menus'
import DataBar from '@/components/DataBar'
export default {
  created(){
    this.getlist({page:this.pageChange,pagesize:this.pagesizeChange})
  },
  components:{
    DataBar
  },
  data () {
    return {
      formSearch_title:'',
      DataNum:0,//数据一共多少条
      tableData: [],//列表渲染数据
      totalPages:10,
      pageChange:1,//页数变化
      pagesizeChange:10,//页面尺寸变化
      articledialogVisible:false,//文章弹出对话框
      multipleSelection: [],//选中
      id:'',
      formData:{
        permissions:[],
        title:'',
      },//用户弹出对话框绑定的数据
      permission_group_options:[],//用户弹出对话框//权限组名称
      permission_data: [],
      title:'',//用户弹出对话框标题
      rules:{
        title:[
      { required:true,message:'用户名不能为空',trigger:'blur'},
      { required:true,pattern: /^(?!\s+).*(?<!\s)$/,  message: '用户名首尾不能为空格', trigger: 'blur' }
      ],
      },
    }
  },
  methods: {
    //#渲染函数
    async getlist(params){
      this.tableData=[]
      const {data}=await list(params)
      console.log(data);
      this.DataNum=data.counts//数据一共多少条
      this.totalPages=data.pages*this.pagesizeChange
      this.tableData=data.list
      this.tableData.forEach(item=>{
        item.createTime=item.create_date.split('').splice(0,10).join('')
      })
      console.log(this.tableData);
    },
    //#搜索功能
    SearchOnSubmit() {
      this.getlist({page:this.pageChange,pagesize:this.pagesizeChange,title:this.formSearch_title})
    },
    clearMsg(){
      this.formSearch_title=''
    },
    //获取Tree数据
    async getMenuList(){
      const {data}=await menu_list()
      this.permission_group_options=data
      this.permission_data.push({id:0,label:'系统菜单和页面权限点',children:[]})
      console.log(this.permission_group_options);
      console.log(this.permission_data);
      this.permission_group_options.forEach((item,index_a)=>{
        this.permission_data[0].children.push({id:item.id,label:item.title,children:[]})
        if(item.childs&&item.childs!==[]){
          item.childs.forEach((item_b,index_b)=>{
            this.permission_data[0].children[index_a].children.push({id:item_b.id,label:item_b.title,children:[]})
            if(item_b.points&&item_b.points!==[]){
              item_b.points.forEach((item_c)=>{
                this.permission_data[0].children[index_a].children[index_b].children.push({id:item_c.id,label:item_c.title})
              })
            }
          })
        }
      })
    },
    async Visible(){
      this.title='创建权限组'
      this.articledialogVisible=true
      this.getMenuList()
      console.log(this.permission_data);
    },
    //Tree changes
    handleCheckChange(data, checked, indeterminate){
      console.log(data, checked, indeterminate);
      if(checked===false)return
      if(!this.formData.permissions.includes(data.id))this.formData.permissions.push(data.id)
    },
    //#底部页数切换功能
    //页数变化
    handleCurrentChange(value){
      this.pageChange=value
      this.getlist({page:this.pageChange,pagesize:this.pagesizeChange})
    },
    //页面尺寸发生变化
    handleSizeChange(value){
      this.pagesizeChange=value
      this.getlist({page:this.pageChange,pagesize:this.pagesizeChange})
    },
    //#弹出框功能
    //关闭弹出窗口_重置校验
    dialogclose(){
      this.$refs.formData.resetFields()
      this.permission_data=[]
      this.formData={
        permissions:[],
        title:'',
      }
    },
    //确定按钮
    async confirm(){
      this.$refs.formData.validate()
      console.log(this.formData);
      if(this.title==='创建权限组'){
        try {
          const res = await add(this.formData)
          console.log(res);
          this.$message.success('操作成功')
          this.articledialogVisible = false
          this.getlist({page:this.pageChange,pagesize:this.pagesizeChange,username:this.formSearch_username})
        } catch (error) {
          console.log(error);
        }
      }
      else{
        try {
          await update(this.formData)
          this.$message.success('操作成功')
          this.articledialogVisible = false
          this.getlist({page:this.pageChange,pagesize:this.pagesizeChange,username:this.formSearch_username})
        } catch (error) {
          console.log(error);
        }
      }
    },
    //#编辑修改功能
    async recompose(row){
      this.title='编辑权限组'
      console.log(row);
      this.formData.id=row.id
      const {data}=await detail(row)
      console.log(data);
      this.formData.title=data.title
      await this.getMenuList()
      this.formData.permissions=data.permissions
      console.log(this.DefaultCheck);
      this.articledialogVisible = true
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    //#删除功能
    remove(row){
        this.$confirm('此操作将永久删除用户 , 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
            try {
              const res= await remove(row)
              console.log(res);
              this.$message.success('删除成功')
              this.getlist()
            } catch (error) {
              console.log(error);
            }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
  }
}
</script>

<style scoped lang='scss'>
.interview-skills{
  margin: 0 auto;
  background-color: #fff;
  width: 99%;
  border: 1px solid #d8dce5;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  padding: 20px;
  padding-bottom: 80px;
  .hm-mm-list{
    margin-top: 20px;
  }
  .hm-mm-top{
    margin-top: 10px;
    .hm-mm-top-left{
      margin-left: 25px;
    }
    .hm-mm-top-right{
      margin-right: 10px;
    }
  }
  ::v-deep .dialog-footer{
   .el-form-item__content{
    text-align: center;
    margin-right: 100px;
    margin-top: 50px;
   }
  }
  ::v-deep .cell{
     .el-button--primary{
      color: #409eff !important;
      background: #ecf5ff !important;
      border-color: #b3d8ff !important;
    }
    .el-button--primary:hover{
      color: #ecf5ff !important;
      background: #409eff !important;
    }
    .el-button--danger{
    color: #f56c6c;
    background: #fef0f0;
    border-color: #fbc4c4;
    }
    .el-button--danger:hover{
      color: #ecf5ff !important;
      background: #f56c6c !important;
    }
  }
}
</style>

